<template>
  <div class="config-announcement-edit" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <h2 class="title f1">公告编辑</h2>
    <div class="bg-f p-20 fr ac">
      <input class="art-title f1" type="text" placeholder="请输入文章标题（5 - 30 个汉字）" v-model="art.noticetitle">
      <span v-if="art.noticetitle.length < 5" class="f-12">还需输入 <span class="b">{{titleCount}}</span> 个字</span>
      <span v-else-if="art.noticetitle.length <= 30" class="f-12">还可输入 <span class="b">{{titleCount}}</span> 个字</span>
      <span v-else class="f-12">已超出 <span class="b">{{titleCount}}</span> 个字</span>
    </div>
    <div class="bg-f">
      <quill-editor v-model="art.textdetails" :options="options" ref="editor" @change="onEditorChange"/>
    </div>
    <div class="fr ac mt-30">
      <span class="f1 c-f f-12">正文字数：{{count}}</span>
      <el-button type="primary" @click="submit" :loading="submiting">发布</el-button>
    </div>
  </div>

</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { quillEditor } from 'vue-quill-editor'
  import moment from '@/utils/moment'

  export default {
    name: 'config-announcement-edit',
    components: { quillEditor },
    props: [ 'id' ],
    data () {
      return {
        options: {
          placeholder: '请输入正文'
        },
        art: {
          nid: '',
          noticeid: '',
          editor: '',
          noticetitle: '',
          textdetails: '',
          readcount: '',
        },
        count: 0,
        loading: false,
        submiting: false
      }
    },
    computed: {
      titleCount () {
        const { length } = this.art.noticetitle
        if (length < 5) return 5 - length
        else if (length <= 30) return 30 - length
        else return length - 30
      }
    },
    methods: {
      onEditorChange ({ quill, html, text }) {
        this.count = text.length - 1
      },
      getArt () {
        const form = {}
        this.loading = true
        if (this.id) form.noticeid = this.id
        this.$http('/tnotice/form', form).then(
          res => {
            for (const k in this.art) {
              this.art[k] = res.data[k] || ''
            }
            this.loading = false
          }
        )
      },
      validate () {
        if (!this.form.noticetitle) {
          this.$notify.warning('请输入标题')
          return false
        }
        if (this.form.noticetitle.length < 5 || this.form.noticetitle.length > 30) {
          this.$notify.warning('标题长度应为5 ~ 30个字符')
          return false
        }
        if (!this.form.textdetails) {
          this.$notify.warning('请输入正文')
          return false
        }
        return true
      },
      submit () {
        if (!this.validate()) return
        const form = Object.assign(this.art)
        if (!form.nid) {
          delete form.nid
          form.releasetime = moment().format('YYYY-MM-DD HH:mm:ss')
          form.updatetime = form.releasetime
        } else {
          form.updatetime = moment().format('YYYY-MM-DD HH:mm:ss')
        }
        if (!form.editor) form.editor = this.$store.state.user.username
        this.submiting = true
        this.$http('tnotice/saveOrUpdate', form).then(
          () => {
            this.$notify({
              title: '成功',
              message: `${form.nid ? '保存' : '创建'}成功`,
              type: 'success'
            })
            this.submiting = false
            this.$router.replace('/config/announcement')
          }
        )
      }
    },
    created () {
      this.getArt()
    }
  }
</script>

<style lang="less">
.config-announcement-edit {width: 1000px;margin: 0 auto;
  .art-title {height: 36px;font-size: 24px;outline: none;border: none;}
  .ql-editor {min-height: 400px}
  .el-button--primary {width: 120px;}
}
</style>
